<template>
  <div>
    <!-- 页面头部 -->
    <section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white section-padding">
      <div class="container-custom">
        <div class="max-w-3xl mx-auto text-center">
          <h1 class="text-4xl md:text-5xl font-bold mb-6">关于我们</h1>
          <p class="text-xl text-primary-100 leading-relaxed">
            乐在企业致力于为企业提供专业的数字化解决方案，助力企业实现数字化转型和业务增长。
          </p>
        </div>
      </div>
    </section>

    <!-- 公司介绍 -->
    <section class="section-padding">
      <div class="container-custom">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div class="space-y-6">
            <h2 class="text-3xl font-bold text-gray-900">我们的使命</h2>
            <p class="text-lg text-gray-600 leading-relaxed">
              我们相信技术的力量能够改变企业的运营方式，提升效率，创造价值。我们的使命是通过专业的数字化解决方案，帮助企业实现数字化转型，在激烈的市场竞争中保持领先优势。
            </p>
            <p class="text-lg text-gray-600 leading-relaxed">
              自成立以来，我们已经为200多家企业提供了优质的技术服务，涵盖软件开发、系统集成、技术咨询等多个领域。我们始终坚持以客户为中心的服务理念，为每一位客户提供量身定制的解决方案。
            </p>
          </div>
          <div class="relative">
            <div class="bg-gradient-to-br from-primary-50 to-primary-100 rounded-2xl p-8">
              <div class="text-center text-primary-600">
                <svg class="w-24 h-24 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <h3 class="text-xl font-semibold mb-2">企业愿景</h3>
                <p class="text-sm">成为最受信赖的数字化解决方案提供商</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心价值观 -->
    <section class="section-padding bg-gray-50">
      <div class="container-custom">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold text-gray-900 mb-4">核心价值观</h2>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
            我们的核心价值观指导着我们的每一个决策和行动
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div 
            v-for="value in coreValues" 
            :key="value.id"
            class="text-center"
          >
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path v-html="value.icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ value.title }}</h3>
            <p class="text-gray-600">{{ value.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="section-padding">
      <div class="container-custom">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold text-gray-900 mb-4">发展历程</h2>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
            从创立至今，我们不断成长，持续为客户创造价值
          </p>
        </div>
        
        <div class="relative">
          <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-primary-200"></div>
          
          <div class="space-y-12">
            <div 
              v-for="(milestone, index) in milestones" 
              :key="milestone.id"
              class="relative flex items-center"
              :class="index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'"
            >
              <div class="w-1/2" :class="index % 2 === 0 ? 'pr-8' : 'pl-8'">
                <div class="bg-white rounded-lg shadow-lg p-6">
                  <div class="text-primary-600 font-semibold mb-2">{{ milestone.year }}</div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ milestone.title }}</h3>
                  <p class="text-gray-600">{{ milestone.description }}</p>
                </div>
              </div>
              
              <div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-primary-600 rounded-full border-4 border-white shadow-lg"></div>
              
              <div class="w-1/2"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="section-padding bg-primary-600 text-white">
      <div class="container-custom text-center">
        <h2 class="text-3xl font-bold mb-4">准备与我们合作？</h2>
        <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
          让我们一起探讨如何为您的企业创造更大的价值
        </p>
        <NuxtLink to="/contact" class="btn-primary bg-white text-primary-600 hover:bg-gray-100 px-8 py-4 text-lg">
          联系我们
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<script setup>
// 设置页面 SEO
useHead({
  title: '关于我们',
  meta: [
    { name: 'description', content: '了解乐在企业的使命、愿景和核心价值观，我们致力于为企业提供专业的数字化解决方案。' },
    { name: 'keywords', content: '关于我们,企业介绍,公司文化,发展历程,数字化解决方案' }
  ]
})

const coreValues = [
  {
    id: 1,
    title: '专业',
    description: '以专业的技术能力和丰富的行业经验为客户提供优质服务',
    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
  },
  {
    id: 2,
    title: '创新',
    description: '持续创新，探索新技术，为客户提供前沿的解决方案',
    icon: 'M13 10V3L4 14h7v7l9-11h-7z'
  },
  {
    id: 3,
    title: '诚信',
    description: '以诚待人，信守承诺，建立长期稳定的合作关系',
    icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'
  },
  {
    id: 4,
    title: '共赢',
    description: '与客户共同成长，实现互利共赢的长期发展',
    icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'
  }
]

const milestones = [
  {
    id: 1,
    year: '2019',
    title: '公司成立',
    description: '乐在企业正式成立，专注于企业数字化解决方案'
  },
  {
    id: 2,
    year: '2020',
    title: '业务拓展',
    description: '服务客户数量突破50家，团队规模扩大至20人'
  },
  {
    id: 3,
    year: '2021',
    title: '技术升级',
    description: '引入云计算和微服务架构，技术能力显著提升'
  },
  {
    id: 4,
    year: '2022',
    title: '市场突破',
    description: '成功服务大型企业客户，年营收突破千万'
  },
  {
    id: 5,
    year: '2023',
    title: '持续发展',
    description: '客户数量超过200家，成为行业领先的技术服务商'
  }
]
</script>
